<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: 10px solid #000;
            width: 400px;
            height: 400px;
            background: red;
            position: relative;
            margin: 30px auto;
        }

        div span {
            width: 100px;
            height: 100px;
            border: 5px solid #0f0;
            position: absolute;
            background-color: #ff0;
            /* display: none; */
            visibility: hidden;
        }
    </style>
</head>

<body>

    <div>
        <span></span>
    </div>

    <script>

        // 注意：
        //   cssText  会出现行内样式覆盖的问题   +=
        //   display:none 不仅不占位置，那么js也无法获取元素的宽高


        //  在事件里面 嵌套事件的时候，里面的事件要写0级事件(方便覆盖)

        //   鼠标跟随的时候，把事件绑定在document对象上

        //   事件需要移除



        // 鼠标中心跟随
        //   鼠标的位置减去盒子自身宽高的一半

        var oDiv = document.querySelector('div');
        var oSpan = document.querySelector('span');

        // 大盒子距离浏览器的间距
        var boxLeft = oDiv.offsetLeft;
        var boxTop = oDiv.offsetTop;

        // 小盒子的半径
        var r = oSpan.offsetWidth / 2;
        console.log(r);

        // 大盒子内部的宽度
        var maxX = oDiv.clientWidth - oSpan.offsetWidth;
        var maxY = oDiv.clientHeight - oSpan.offsetHeight;


        oDiv.addEventListener('mouseover', function () {
            oSpan.style.visibility = 'visible';
            // 写在事件里面的事件尽量写0级事件，可以覆盖
            document.onmousemove = function (e) {
                console.log(333);
                e = e || event;
                var x = e.x - boxLeft - r;
                var y = e.y - boxTop - r;
                if (x < 0) x = 0;
                if (y < 0) y = 0;
                if (x > maxX) x = maxX;
                if (y > maxY) y = maxY;
                oSpan.style.cssText += `left:${x}px;top:${y}px`;
            }
        })
        oDiv.addEventListener('mouseout', function () {
            oSpan.style.visibility = 'hidden';
            document.onmousemove = null;
        })






    </script>

</body>

</html>